<template>
  <div class="switch-component">
    <el-switch
      v-model="datas.value"
      :active-text="datas.activeText"
      :inactive-text="datas.inactiveText"
      :active-color="datas.activeColor"
      :inactive-color="datas.inactiveColor"
      :width="Number(datas.width) || undefined"
      :disabled="datas.disabled"
      :active-value="datas.activeValue"
      :inactive-value="datas.inactiveValue"
      :validate-event="datas.validateEvent"
    ></el-switch>
    
  </div>
</template>

<script>
export default {
  name: 'switch',
  props: {
    datas: {
      type: Object,
      required: true
    },
  },
}
</script>

<style scoped lang="less">
.switch-component {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style> 